<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box">
    <ul id="nav">
      <li class="nav_one" name="hot">首页</li>
      <li class="nav_one">汽车</li>
      <li class="nav_one" name="hot">科技</li>
      <li class="nav_one">魔兽</li>
    </ul>
  </div>
  <script>
    // 1.通过id 查找 document.getElementById("id名");
    var box = document.getElementById("box");
    // 2.通过class查找  找到的是元素集合   集合有length属性  访问每一个元素用下标访问
    var nav_ones = document.getElementsByClassName("nav_one");
    nav_ones[3].style.color = "red"
    // 3.通过标签名获取元素  找到的是元素集合   集合有length属性  访问每一个元素用下标访问
    var lis = document.getElementsByTagName("li");
    lis[2].style.color = "blue";
    // 4.通过name名获取  找到的是元素集合   集合有length属性  访问每一个元素用下标访问
    var hots = document.getElementsByName("hot");
    hots[1].style.backgroundColor = "yellow"
    // 5.通过选择器获取单个元素document.querySelector
    var mylis = document.querySelector("#box li");//document.querySelector 获取一个
    // 6.通过选择器获取多个元素document.querySelectorAll
    var mylisAll = document.querySelectorAll("#box li")//document.querySelectorAll 获取元素集合 集合有length属性  访问每一个元素用下标访问




  </script>
</body>

</html>